<template>
  <div class="songlistdetail">
    <div class="top">
      <div
        class="bg_img"
        :style="{
          backgroundImage: 'url(' + detail.coverImgUrl + ')',
          backgroundRepeat: 'no-repeat',
          backgroundSize: 'cover',
          filter: '(15px)',
        }"
      ></div>
      <img class="detailImg" :src="detail.coverImgUrl" />
      <span class="playcount">
        <van-icon name="play-circle-o" />
        {{ playnamic.playCount | sum }}
      </span>
      <div class="right">
        <p>{{ detail.name }}</p>
        <div>
          <img class="userImg" :src="creator.avatarUrl" alt="" /><span>{{
            creator.nickname
          }}</span>
        </div>
        <h4>{{ detail.description }}</h4>
      </div>
    </div>
    <div class="playnamic">
      <span>
        <van-icon name="add-o" />
        {{ playnamic.bookedCount | sum2 }}
      </span>
      |
      <span>
        <van-icon name="chat-o" />
        {{ playnamic.commentCount | sum2 }} </span
      >|
      <span>
        <van-icon name="share-o" />
        {{ playnamic.shareCount | sum2 }}
      </span>
    </div>
    <!-- 歌曲列表 -->
    <div class="songs">
      <ul>
        <li
          v-for="(item, index) in playlist"
          :key="item.id"
          @click="gosong(item.id)"
        >
          <span>{{ index + 1 }}</span>
          <div class="cont">
            <h3>{{ item.name }}</h3>
            <p><span>SQ</span>{{ item.ar[0].name }}</p>
          </div>
          <div class="icon">
            <van-icon name="play-circle-o" />
            <van-icon name="weapp-nav" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  getdetail,
  getplaylistdetail,
  getplaylistdynamic,
} from "../../api/songlistdetail";
export default {
  name: "songlistdetail",
  data() {
    return {
      id: "",
      // 歌单详情
      detail: {},
      //  歌单内歌曲列表
      playlist: {},
      //  歌单详情动态
      playnamic: {},
      //  歌单作者信息
      creator: {},
    };
  },
  props: [],
  components: {},
  computed: {},
  //  过滤器
  filters: {
    sum(val) {
      if (Number(val) >= 10000) {
        return (val / 10000).toFixed(0) + "万";
      } else {
        return val;
      }
    },
    sum2(val) {
      if (Number(val) >= 10000) {
        return parseInt(val / 10000) + "w+";
      } else {
        return val;
      }
    },
  },
  watch: {},
  created() {
    //  获取路由传来的id
    this.id = this.$route.params.id;
    console.log(this.id);
    //获取歌单详情
    this.getdetail(this.id);
    //获取歌单内歌曲
    this.getlist(this.id);
    //  歌单详情动态
    this.getplaynamic(this.id);
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },

  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  mounted() {},
  methods: {
    //  获取歌单详情
    async getdetail(id) {
      let res = await getdetail(id);
      console.log(res.playlist);
      this.detail = res.playlist;
      this.creator = res.playlist.creator;
    },
    //  获取歌单内歌曲
    async getlist(id) {
      let res = await getplaylistdetail(id);
      console.log(res);
      this.playlist = res.songs;
    },
    //  歌单详情动态
    async getplaynamic(id) {
      let res = await getplaylistdynamic(id);
      // console.log(res);
      this.playnamic = res;
    },
    //  跳转到歌曲播放页
    gosong(id) {
      this.$router.push(`/songdetail/${id}`);
    },
  },
};
</script>

<style scoped>
.songlistdetail {
  width: 100%;
  overflow: hidden;
}
/* top */
.top {
  width: 180%;
  height: 220px;
  position: relative;
  overflow: hidden;
  margin-left: -40%;
  border-radius: 0 0 50% 50%;
}
.bg_img {
  width: 100%;
  height: 100%;
  filter: blur(15px);
  opacity: 0.7;
  z-index: -1;

  /* position: relative; */
}
.detailImg {
  width: 120px;
  border-radius: 10px;
  position: absolute;
  top: 20%;
  left: 27%;
  z-index: 1;
}
.userImg {
  border-radius: 50%;
  width: 40px;
  vertical-align: middle;
  margin-right: 8px;
}
.playcount {
  display: block;
  position: absolute;
  top: 21%;
  left: 28%;
  z-index: 10;
  font-size: 14px;
  color: #fff;
  background: rgba(204, 204, 204, 0.692);
  border-radius: 15px;
  padding: 0 4px;
}
.right {
  position: absolute;
  top: 20%;
  width: 170px;
  right: 27%;
}
.right p {
  color: #fff;
  margin-bottom: 4px;
  height: 42px;
  overflow: hidden;
}
.right span {
  font-size: 12px;
}
.right h4 {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 15px;
  font-weight: 500;
  font-size: 14px;
}
/* 歌单动态 */
.playnamic {
  position: relative;
  top: -22px;
  margin: auto;
  width: 80%;
  display: flex;
  justify-content: space-around;
  background: #fff;
  box-shadow: 0 0 8px 1px rgba(117, 114, 114, 0.37);
  border-radius: 15px;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.671);
}

/* 歌曲列表 */
.songs ul li {
  display: flex;
  justify-content: space-between;
  height: 50px;
  padding: 3px 0;
}
.songs ul li > span {
  line-height: 50px;
  width: 50px;
  text-align: center;
}
.songs ul li .cont {
  flex: 1;
  height: 50px;
}
.songs ul li .cont h3 {
  font-size: 16px;
  overflow: hidden;
  font-weight: 500;
  /* white-space: nowrap; */
  /* text-overflow: ellipsis; */
  width: 100%;
  height: 20px;
}
.songs ul li .cont p {
  font-size: 12px;
  margin-top: 7px;
  font-weight: 300;
}
.songs ul li .cont p span {
  display: inline-block;
  padding: 0 2px;
  border: 1px solid tomato;
  color: tomato;
  border-radius: 5px;
  font-size: 12px;
  margin-right: 4px;
}
.songs ul li .icon {
  width: 80px;
  line-height: 50px;
  font-size: 24px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: rgba(87, 86, 86, 0.959);
}
</style>
